// 基本信息
import { serviceAdd, serviceMod } from "@/api/modules/service/service";
import DialogBox from "@/components/DialogBox";
import SelectGagewayDialog from "@/components/Sansan/GatewayDialog/SelectGagewayDialog";
import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { ResultEnum } from "@/enums/httpEnum";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
import { showTips } from "../../../../utils/util";
import "../server.scss";
import { dataFormat } from "../../../../utils/format";
import { ServiceStatusTypes } from "@/enums/statusEnum";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
import { getDictObj } from "@/utils/cacheUtil";
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["submit", "ok"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const serviceStatusLabels = ref<any>({});
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const uploadEl = ref();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("service_detaildialog.formrule.name"), trigger: "change" }],
			instanceId: [{ required: true, message: proxy?.$t("service_detaildialog.formrule.instance"), trigger: "change" }]
		});
		onMounted(async () => {
			serviceStatusLabels.value = await getDictObj("service_status");
		});
		watchEffect(() => {
			if (attrs.visible && !props.detail.svcType) {
				props.detail.svcType = "applet";
			}
		});
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					let api = props.detail.id ? serviceMod : serviceAdd;
					let { code, result, message } = await api(props.detail);
					//操作失败
					if (code != ResultEnum.SUCCESS) {
						showTips(code, message);
						return;
					}

					//直接提交表单
					if (!uploadEl.value || !uploadEl.value.getFile() || props.detail.svcType != "applet") {
						props.detail.id = result;
						emit("submit", props.detail);
						showTips(code, "添加服务", message);
						return;
					}
					//上传文件
					uploadEl.value.submit({ id: result });
				}
			});
		};
		const uploadSuccess = (res: any) => {
			showTips(res.code, "上传", res.message);
			emit("submit", props.detail);
		};
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="pr-8">
						{props.detail.readonly ? (
							<div class="pl-8">
								<el-alert
									class="server-info-tips"
									style="line-height: 1;margin-bottom:20px"
									title={
										props.detail.svcType == "dockerapp"
											? proxy?.$t("service_detaildialog.alert_title.docker")
											: proxy?.$t("service_detaildialog.alert_title.ordinary")
									}
									type="info"
									description={
										props.detail.svcType == "dockerapp"
											? proxy?.$t("service_detaildialog.alert_description.docker")
											: proxy?.$t("service_detaildialog.alert_description.ordinary")
									}
								/>
								<el-form class="readonly-form" model={props.detail} ref={formRef} rules={formRule} label-width="85px">
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.status")}>
										<OnlineStatus
											labels={serviceStatusLabels.value}
											onlineLabel={proxy?.$t("service_detaildialog.status.online")}
											offlineLabel={proxy?.$t("service_detaildialog.status.offline")}
											types={ServiceStatusTypes}
											v-model={props.detail.status}
										></OnlineStatus>
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.name")}>
										{props.detail.name || "--"}
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.type")}>
										{props.detail.svcType == "applet"
											? proxy?.$t("service_detaildialog.radio.ordinary")
											: proxy?.$t("service_detaildialog.radio.docker")}
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.key")}>
										{props.detail.instanceId || "--"}
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.arg")}>{props.detail.arg || "--"}</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.machine")}>
										{props.detail.machine == "local"
											? proxy?.$t("service_detaildialog.form_label.status")
											: props.detail.machine || "--"}
									</el-form-item>
									<el-form-item
										label={
											props.detail.svcType == "dockerapp"
												? proxy?.$t("service_detaildialog.form_label.mirror")
												: proxy?.$t("service_detaildialog.form_label.running")
										}
									>
										{props.detail.path || "--"}
									</el-form-item>
									{props.detail.svcType == "applet" ? (
										<el-form-item label={proxy?.$t("service_detaildialog.form_label.bin")}>
											{props.detail.bin || "--"}
										</el-form-item>
									) : null}
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.version")}>
										{props.detail.version || "--"}
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.ip")}>{props.detail.ip || "--"}</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.updatetime")}>
										{dataFormat("datetime", props.detail.updateTime) || "--"}
									</el-form-item>
									{/* <el-form-item label="登录时间：">{dataFormat("datetime", props.detail.loginTime) || "--"}</el-form-item> */}
									{/* <el-form-item label="注册时间：">{dataFormat("datetime", props.detail.registerTime) || "--"}</el-form-item> */}
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.creattime")}>
										{dataFormat("datetime", props.detail.createTime) || "--"}
									</el-form-item>
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.remark")}>
										{props.detail.remark || "--"}
									</el-form-item>
								</el-form>
							</div>
						) : (
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label={proxy?.$t("service_detaildialog.form_label.type")} prop="svcType">
									<el-radio-group v-model={props.detail.svcType} disabled={props.detail.id ? true : false}>
										<el-radio label="applet">{proxy?.$t("service_detaildialog.radio.ordinary")}</el-radio>
										<el-radio label="dockerapp">{proxy?.$t("service_detaildialog.radio.docker")}</el-radio>
									</el-radio-group>
									<el-alert
										class="server-info-tips"
										style="line-height: 1;margin-top: 15px;"
										title={
											props.detail.svcType == "dockerapp"
												? proxy?.$t("service_detaildialog.alert_title.docker")
												: proxy?.$t("service_detaildialog.alert_title.ordinary")
										}
										type="info"
										description={
											props.detail.svcType == "dockerapp"
												? proxy?.$t("service_detaildialog.alert_description.docker")
												: proxy?.$t("service_detaildialog.alert_description.ordinary")
										}
									/>
								</el-form-item>
								<el-form-item label={proxy?.$t("service_detaildialog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label={proxy?.$t("service_detaildialog.form_label.key")} prop="instanceId">
									<el-input v-model={props.detail.instanceId} />
								</el-form-item>
								<el-form-item label={proxy?.$t("service_detaildialog.form_label.arg")} prop="arg">
									<el-input v-model={props.detail.arg} />
								</el-form-item>
								{"local" != props.detail.machine ? (
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.machine")} prop="machine">
										<SelectGagewayDialog detail={props.detail} gatewayKey="machine" class="w-full"></SelectGagewayDialog>
									</el-form-item>
								) : null}
								<el-form-item label={proxy?.$t("service_detaildialog.form_label.remark")} prop="remark">
									<el-input v-model={props.detail.remark} type="textarea" auto-size />
								</el-form-item>
								{props.detail.svcType == "dockerapp" ? (
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.mirror")} prop="path">
										<el-input v-model={props.detail.path} placeholder={proxy?.$t("service_detaildialog.placeholder.mirror")} />
									</el-form-item>
								) : (
									<el-form-item label={proxy?.$t("service_detaildialog.form_label.bin")} prop="bin">
										<div class="form-item-upload">
											{props.detail.bin ? (
												<div class="file-info ">
													{props.detail.bin}
													<el-link
														type="primary"
														class="delete-server-file ml-2 leading-3"
														onClick={() => (props.detail.bin = "")}
													>
														{proxy?.$t("service_detaildialog.link.remark")}
													</el-link>
												</div>
											) : null}
											<LazyUploadFile
												style={{ display: props.detail.bin ? "none" : "block" }}
												title={
													!props.detail.id
														? proxy?.$t("service_detaildialog.upload_title.enter")
														: proxy?.$t("service_detaildialog.upload_title.select")
												}
												ref={uploadEl}
												showIcon={false}
												disabled={!props.detail.name}
												v-model:fileUrl={props.detail.bin}
												v-model:fileName={props.detail.bin}
												onSuccess={uploadSuccess}
												width="150px"
												height="32px"
												emptyTips={proxy?.$t("service_detaildialog.upload.emptytips")}
											></LazyUploadFile>
										</div>
									</el-form-item>
								)}
							</el-form>
						)}
					</div>
				</DialogBox>
			);
		};
	}
});
